<!--
 * @Author: Qimu
 * @Date: 2020-05-13 22:18:58
 * @LastEditors: Qimu
 * @LastEditTime: 2020-05-23 20:30:58
 * @Description: file content
 * @FilePath: \vue-admin-koa2\vue-admin\src\components\Icon\Icons.vue
 -->
<template>
  <div class="icons">
    <h3>请选择下面图标</h3>
    <el-card class="box-card">
      <div class="icon-scrollbar">
        <el-scrollbar class="scrollbar-wrapper">
          <div v-for="item of elementIcons" :key="item" @click="getIcon('el-icon-' + item)">
            <div class="icon-item">
              <i :class="'el-icon-' + item" />
              <span>{{ item }}</span>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </el-card>
  </div>
</template>

<script>
import elementIcons from '@/plugins/element-icons'

export default {
  name: 'Icons',
  data() {
    return {
      elementIcons
    }
  },
  methods: {
    getIcon(value) {
      this.$emit('getIcon', value)
    }
  }
}
</script>

<style lang="sass" scoped>
.icon-item
  width: 100px
  height: 75px
  text-align: center
  float: left
  font-size: 30px
  color: #24292e
  cursor: pointer
span 
  display: block
  font-size: 14px
  margin-top: 5px
</style>
